<template>
	<view class="layout pageBg">
		<post-nav-bar title="智能厨房"></post-nav-bar>
		<view class="banner">
			<image :src="getWebImage('banner/kitchen_banner.jpg')" mode="aspectFill"></image>
		</view>
		<view class="addForm">
			<form @submit="login">
				<view class="uni-form-item">
					<view class="phone">
						<uni-icons type="contact" size="30" color="#FF4D4F"></uni-icons>
						<input v-model="loginForm.phone" class="input" type="text" placeholder="请输入电话" maxlength="20" />
					</view>
				</view>
				<view class="tip"  v-if="tip.phone !== ''">{{tip.phone}}</view>
				<view class="uni-form-item">
					<view class="password">
						<uni-icons type="locked" size="30" color="#FF4D4F"></uni-icons>
						<input v-model="loginForm.password" class="input" type="text" placeholder="请输入密码" maxlength="20" />
					</view>
				</view>
				<view class="tip" v-if="tip.password !== ''">{{tip.password}}</view>
				<view class="uni-btn-v">
					<button class="login-btn" @click="login" >登录</button>
				</view>
				
			</form>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { appUrl } from '../../main';

const token = ref("")
const addForm = ref({
	ingredientName: "",
	quantity: "",
	unit: "",
	createdAt: "",
	location: ""
})

const getWebImage = (path) => {
	return "https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/food_moment_discover/image/" + path
}

onMounted(()=>{
	token.value = uni.getStorageSync("token")
	if(token.value === null || token.value === ""){
		uni.showToast({
			icon:'error',
			title:"用户未登录",
			duration: 1000
		})
		uni.reLaunch({
			url:"/pages/UserView/UserView"
		})
	}else{
		uni.request({
			url:appUrl+"/ingredient/get",
			header:{
				token: token.value
			},
			method:"GET"
		}).then(res => {
			console.log(res.data.data);
		})
	}
})
</script>

<style lang="scss" scoped>
.layout{
	.banner{
		width: 100%;
		image{
			width: 100%;
		}
	}
}
</style>
